<template>
  <view class="book-ticket-detail-page">
    <view class="booking-info" v-if="info.orderId">
      <view class="status">
        <view
          class="label"
          :class="{ disable: info.orderStatus == 3 || info.orderStatus == 4 }"
          >{{ info.orderStatus | orderStatusFilter }}</view
        >
        <view class="val" :class="{ red: status === 1 || status === 2 }">
          <u-count-down
            v-if="info.orderStatus == 1"
            :time="info.residueTimeNum"
            format="HH:mm:ss"
          ></u-count-down>
          {{ info.orderStatus | statusSuffixText }}
        </view>
      </view>
      <view class="card">
        <image
          style="
            width: 100%;
            height: 320rpx;
            border-radius: 16rpx;
            display: block;
          "
          :src="img_api + showBaseInfo.goodPic"
        ></image>
        <view class="info">
          <view class="title u-line-1">{{ showBaseInfo.commonName }}</view>
        </view>
      </view>
      <view class="opt" @click="callPhone">
        <view class="item nav" @click="openNav" v-if="false">
          <image
            class="icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img12.png"
          ></image>
          <view class="text">位置</view>
        </view>
        <view class="line" v-if="false"></view>
        <view class="item phone">
          <image
            class="icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img11.png"
          ></image>
          <view class="text">联系</view>
        </view>
      </view>
      <!--        核销码-->
      <view
        class="qrcode"
        v-if="info.orderStatus == 2 || info.orderStatus == 4"
      >
        <view class="title">
          <text class="hexiao-left">核销码</text>
          <text v-if="info.orderStatus == 4" class="hexiao"> 已核销</text>
        </view>
        <view class="code-box" v-if="qrcodeText">
          <tki-qrcode
            ref="qrcode"
            cid="ticket"
            :onval="true"
            :size="300"
            :showLoading="false"
            :val="qrcodeText"
          />
        </view>
      </view>
      <!--        预约详情-->
      <view class="reverse-detail" :class="{ disable: info.orderStatus == 3 }">
        <view class="date">
          <view class="label">预约日期</view>
          <view class="val"
            >{{ showBaseInfo.ticketDate | showTime }}
            <text class="tag">{{ showBaseInfo.ticketDate | showWeek }} </text>
          </view>
        </view>
        <view class="times">
          <view class="label">预约时段</view>
          <view class="list">
            <view class="item">
              <view class="st" v-if="false">11:00</view>
              <view class="zhi" v-if="false">至</view>
              <view class="ed" v-if="false">12:00</view>
              <view class="tag">{{ showBaseInfo.ticketCount }}张</view>
            </view>
          </view>
        </view>
      </view>
      <view class="price" :class="{ disable: info.orderStatus == 3 }">
        <view style="display: flex; align-items: center">
          <view class="label"> 合计金额</view>
          <view class="return-premium" v-if="info.orderStatus == 6"
            >已退费
          </view>
        </view>

        <view class="val">¥{{ info.showOrderTotalPrice }}</view>
      </view>
    </view>

    <view class="confirm-btn-box">
      <view
        class="btn outline w240"
        v-if="info.orderStatus == '1'"
        @click="cancelOrder"
        >取消订单
      </view>
      <view
        class="btn outline w240"
        v-if="info.orderStatus == '2' || info.orderStatus == '4'"
        @click="callPhone"
        >联系客服
      </view>
      <view
        class="btn outline w240"
        v-if="info.orderStatus == '3'"
        @click="delOrder"
        >删除订单
      </view>
      <view
        class="btn w424"
        style="margin-left: 22rpx"
        @click="getPayOrderInfo"
        v-if="info.orderStatus == '1'"
        >去支付
      </view>
    </view>
  </view>
</template>

<script>
import tkiQrcode from "tki-qrcode";
import dayjs from "dayjs";
import {
  getActiveOrderDetail,
  getCancleOrder,
  getDeleteOrder,
} from "@/config/api";
import { payTransactions } from "@/utils";
const ticketOrderStatus = {
  1: "待付款",
  2: "已付款",
  3: "已取消",
  4: "已核销",
  5: "已发货",
  6: "已退款",
};
const statusSuffixTextMap = {
  1: "后未支付预约将自动取消",
  2: "请在规定时间内核销门票",
  3: "该订单已经取消",
  4: "门票已核销，感谢您的使用～",
  6: "欢迎下次使用～",
};
export default {
  props: ["id","num"],
  components: {
    tkiQrcode,
  },
  data() {
    return { info: {}, status: 1 };
  },
  onLoad() {
    console.log(this.id);
    this.getDetail();
  },
  filters: {
    orderStatusFilter: function (value) {
      return ticketOrderStatus[value] || "null";
    },
    statusSuffixText(value) {
      return statusSuffixTextMap[value];
    },
    showWeek(value) {
      const wee = dayjs(value).day();
      const weeTxt = ["日", "一", "二", "三", "四", "五", "六"];
      return "周" + weeTxt[wee];
    },
    showTime(value) {
      return dayjs(value).format("MM月DD日");
    },
  },
  computed: {
    qrcodeText() {
      return this.info.orderNum;
    },
    showBaseInfo() {
      return (this.info?.detaildVoList && this.info?.detaildVoList[0]) || {};
    },
  },
  methods: {
    getDetail() {
      getActiveOrderDetail({
        orderId: this.id,
      }).then((res) => {
        if (res.code == 200) {
          res.data.showOrderTotalPrice = Number(
            `${res.data.orderTotalPrice}e-2`
          ).toFixed(2);
          this.info = res.data;
          this.$nextTick(() => {
            this.$refs.qrcode && this.$refs.qrcode._makeCode();
          });
          console.log("this.info", this.info);
        }
      });
    },
    //     删除订单
    delOrder() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getDeleteOrder({
              _id: _this.id,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已删除", icon: "none" });
                _this.toURL(
                  "",
                  { reload: true, updateId: _this.id, action: "删除" },
                  { type: "back" }
                );
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 取消订单
    cancelOrder() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getCancleOrder({
              _id: _this.id,
            }).then((res) => {
              if (res.code === 200) {
                uni.showToast({ title: "已取消", icon: "none" });
                _this.toURL(
                  "",
                  { reload: true, updateId: _this.id, action: "取消" },
                  { type: "back" }
                );
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 拨打电话
    callPhone() {
      this.toURL(this.info.deliveryPhone, {}, { type: "phone" });
    },
    openNav() {},
    // 支付前获取订单详细
    getPayOrderInfo() {
      return payTransactions(this.id)
        .then(() => {
          this.toURL(
            "/page_index/appointment/result",
            { state: 1, id: this.id },
            { type: "redirect" }
          );
        })
        .catch(({ code }) => {
          this.toURL(
            "/page_index/appointment/result",
            { state: 0, id: this.id },
            { type: "redirect" }
          );
        });
    },
  },
};
</script>

<style lang="scss">
.book-ticket-detail-page {
  min-height: 100vh;
  background-color: #fff;
  padding: 24rpx 32rpx 0;

  .booking-info {
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom) + 50rpx);
  }

  .status {
    .label {
      font-size: 40rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.9);
      line-height: 56rpx;
      &.disable {
        color: rgba(0, 0, 0, 0.5);
      }
    }

    .val {
      display: flex;
      margin-top: 16rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;

      &.red text {
        color: #ff5000 !important;
      }

      text {
        font-size: 24rpx !important;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9) !important;
        line-height: 34rpx !important;
        margin-right: 8rpx;
      }
    }
  }

  .card {
    margin-top: 32rpx;
    position: relative;
    width: 686rpx;
    height: 320rpx;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 2rpx 6rpx -2rpx rgba(85, 68, 59, 0.3),
      0rpx 4rpx 10rpx -2rpx rgba(115, 90, 70, 0.25);

    &:before {
      display: block;
      top: 0;
      left: 0;
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1;
      border-radius: 16rpx;
    }

    .info {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 56rpx 24rpx 20rpx;
      z-index: 2;
      width: 100%;
      border-radius: 16rpx;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );

      .title {
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 40rpx;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .opt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24rpx;
    height: 88rpx;
    background: #f9f4f2;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .item {
      display: flex;
      align-items: center;

      .icon {
        display: block;
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }

      .text {
        font-size: 28rpx;
        font-weight: 500;
        color: #ff5000;
        line-height: 40rpx;
      }
    }

    .line {
      background-color: #fcb296;
      width: 2rpx;
      height: 24rpx;
      margin-left: 124rpx;
      margin-right: 124rpx;
    }
  }

  .qrcode {
    text-align: center;
    margin-top: 48rpx;

    .title {
      .hexiao-left {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;
        margin-right: 24rpx;
      }
      .hexiao {
        position: relative;
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.3);
        line-height: 50rpx;
        padding-left: 24rpx;
        &:before {
          content: "";
          position: absolute;
          top: 8rpx;
          left: 0;
          width: 2rpx;
          height: 32rpx;
          display: inline-block;
          background-color: rgba(255, 80, 0, 0.502);
        }
      }
    }

    .code-box {
      width: 320rpx;
      height: 320rpx;
      margin: 14rpx auto 0;
      padding: 10rpx;
      background-color: #fff;
    }
  }

  .reverse-detail {
    margin-top: 40rpx;
    display: flex;
    padding-bottom: 40rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

    &.disable {
      color: rgba(0, 0, 0, 0.3);

      .date {
        .val {
          color: rgba(0, 0, 0, 0.3);
        }
      }

      .label {
        color: rgba(0, 0, 0, 0.3);
      }

      .times {
        .item {
          opacity: 0.4 !important;
        }
      }
    }

    .label {
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 34rpx;
      margin-bottom: 16rpx;
    }

    .date {
      margin-right: 32rpx;

      .val {
        display: flex;
        align-items: center;
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 50rpx;

        .tag {
          display: block;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 32rpx;
          padding: 0 4rpx;
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          margin-left: 8rpx;
        }
      }
    }

    .times {
      margin-left: auto;

      .item {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .st,
        .ed {
          font-size: 36rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 50rpx;
          margin-right: 8rpx;
        }

        .zhi {
          padding: 0 4rpx;
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 32rpx;
          margin-right: 8rpx;
        }

        .tag {
          padding: 0 4rpx;
          background: #ff5000;
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #fff201;
          line-height: 32rpx;
        }
      }
    }
  }

  .booking-info.disable {
    .reverse-detail {
      .label {
        color: rgba(0, 0, 0, 0.3);
      }

      .date .val {
        color: rgba(0, 0, 0, 0.3);

        .tag {
          color: rgba(255, 80, 0, 0.502);
          background: rgba(255, 80, 0, 0.102);
        }
      }

      .times .item {
        .st,
        .ed {
          color: rgba(0, 0, 0, 0.3);
        }

        .zhi {
          color: rgba(255, 80, 0, 0.502);
          background: rgba(255, 80, 0, 0.102);
        }

        .tag {
          background: rgba(255, 80, 0, 0.502);
          color: #fff201;
        }
      }
    }
  }

  .price {
    display: flex;
    justify-content: space-between;
    padding: 34rpx 0;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

    &.disable {
      .val {
        color: rgba(0, 0, 0, 0.3);
      }
    }

    .label {
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 40rpx;
    }

    .val {
      font-size: 40rpx;
      font-family: D-DIN-Bold;
      font-weight: 700;
      color: #ff5000;
      line-height: 44rpx;
      -webkit-background-clip: text;
    }

    .return-premium {
      margin-left: 20rpx;
      padding: 0 4rpx;
      background: rgba(255, 80, 0, 0.102);
      border-radius: 2rpx 2rpx 2rpx 2rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ff5000;
      line-height: 32rpx;
    }
  }

  .confirm-btn-box {
    position: fixed;
    width: calc(100% - 64rpx);
    padding-left: 32rpx;
    padding-right: 32rpx;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 14rpx 58rpx 0rpx rgba(100, 100, 111, 0.2);
    box-sizing: content-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .w424 {
      width: 424rpx;
    }

    .w240 {
      width: 240rpx;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      background: #ff5000;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 28rpx;
      border: 2rpx solid #ff5000;
      font-weight: 600;
      color: #ffffff;
      line-height: 40rpx;

      &.outline {
        background: #ffffff;
        border: 2rpx solid rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.7);
        font-weight: 500;
      }
    }
  }
}
</style>
